<!-- 自定义底部导航栏 -->
<template>
  <view class="container">
    <view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
          :style="'width: calc(100% /' + tabbarList.length + ')'"
          v-for="(item, i) in tabbarList" :key="i">

      <view class="box" v-if="!item.centerItem" @click="changeItem(item)">
        <view class="item-top">
          <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath"/>
        </view>
        <text class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</text>
      </view>


      <view class="icon-bg" v-else @click="openPage(item)">
        <view class="box" :style="'color: #ffffff'">
          <view class="item-top">
            <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath"/>
          </view>
          <text class="item-bottom">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    /* 当前导航栏 */
    currPage: {
      type: Number,
    }
  },
  data() {
    return {
      curItem: 1, // 当前所选导航栏
      // 导航栏列表
      tabbarList: [{
        id: 1,
        pagePath: "/pages/index",
        iconPath: "/static/img/bottom/index.png",
        selectedIconPath: "/static/img/bottom/indexA.png",
        text: "首页",
        centerItem: false,
      },
        {
          id: 2,
          pagePath: "/pages/sale/index",
          iconPath: "/static/img/bottom/createOrder.png",
          selectedIconPath: "/static/img/bottom/createOrder.png",
          text: "开单",
          centerItem: true,
        },
        {
          id: 3,
          pagePath: "/pages/mine/index",
          iconPath: "/static/img/bottom/user.png",
          selectedIconPath: "/static/img/bottom/userA.png",
          text: "个人中心",
          centerItem: false,
        }
      ]
    };
  },
  mounted() {
    this.curItem = this.currPage; // 当前所选导航栏
    // #ifdef H5
    uni.hideTabBar(); // 隐藏 tabBar 导航栏
    // #endif

  },
  methods: {
    /* 导航栏切换 */
    changeItem(e) {
      // 中间凸起按钮
      if (e.id === this.curItem) {
        return;
      }
      this.curItem = e.id
      this.$tab.reLaunch(e.pagePath)
    },
    openPage(e) {
      uni.navigateTo({url: e.pagePath})
    }
  }
};
</script>
<style lang="scss" scoped>

[nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view {
  flex-direction: unset;
}

[nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view {
  flex-direction: unset;
}

$textDefaultColor: #000000;
$textSelectedColor: #000000;

.container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  color: $textDefaultColor;
  padding: 5rpx 0;
  background-color: white;
  box-shadow: 0 0 10rpx #999;
}

.tabbar-item {
  width: 33.33%;
  // overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;

  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & > image {
      max-width: 2.3rem;
      max-height: 2.3rem;
      width: auto;
      height: auto;
    }

    .item-top {
      flex-shrink: 0;
      width: 50rpx;
      height: 50rpx;
      padding: 4rpx;
      text-align: center;
      margin-left: 5%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .item-bottom {
      width: 100%;
      font-size: 15rpx;
      text-align: center;
    }

    .item-active {
      color: $textSelectedColor;
    }
  }


}


.center-item {
  position: relative;
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon-bg {
    position: absolute;
    bottom: 0;
    transform: translate(-50%, 40%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 6px;
    box-sizing: border-box;
    z-index: 1;
    border-top: 1px solid #efefef;
    text-align: center;

    & > view {
      background-color: #ff3434;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .item-bottom {
      position: absolute;
      color: white;
      text-align: center;
      height: 100%;
      display: contents;
    }
  }

}

</style>
